<template>
  <div class="text-canvas">
    <div>
      <narrator />
    </div>
    <div>
      <canvas id="textCanvas"></canvas>
    </div>
  </div>
</template>

<script>
import { defineComponent, ref, onMounted } from "vue";
import Narrator from "./Narrator.vue";
import { drawText } from "./text";

export default defineComponent({
  components: {
    Narrator,
  },
  setup() {
    onMounted(() => {
      drawText(document.getElementById("textCanvas"), "1069");
    });
  },
});
</script>

<style>
.text-canvas {
  position: inherit;
  width: 100%;
  left: 50%;
  right: 50%;
  display: block;
  margin: auto;
  background: #ecf0f1;
}
</style>